<template>
    <div>

        <div class="threeTabsBox">

            <div>
                <div class="d-flex text-size-18 font-weight-bold">
                    <div class="threeTabsTab" :class="{'active':threeTabsTab==0}"
                         @click="switchThreeTabsTab(0)">
                        <div style="width:8px;height: 8px;border-radius: 6px;background-color: red;position: absolute;top:6px;right:28px;"
                             v-if="realTimePoliceInformationList.length>0"></div>
                        实时警情
                    </div>
                    <div class="threeTabsTab" :class="{'active':threeTabsTab==1}"
                         @click="switchThreeTabsTab(1)">
                        <div style="width:8px;height: 8px;border-radius: 6px;background-color: red;position: absolute;top:6px;right:28px;"
                             v-if="riskWarningList.length>0"></div>
                        风险预警
                    </div>
                    <div class="threeTabsTab" :class="{'active':threeTabsTab==2}"
                         @click="switchThreeTabsTab(2)">
                        <div style="width:8px;height: 8px;border-radius: 6px;background-color: red;position: absolute;top:6px;right:28px;"
                             v-if="trafficControlList.length>0"></div>
                        交通管制
                    </div>
                </div>
            </div>

            <div class="d-flex w-100 px-14" style="margin-top: -26px;">
                <Jselect :list="expresswayList" @jchange="expresswayChange"
                         class="w-100 mr-14"></Jselect>
                <Jselect :list="upDownList" @jchange="upDownChange"
                         class="w-100"></Jselect>
            </div>

            <div class="mt-8">
                <div class="overfow-y-auto noScrollBar" style="height:598px">

                    <div class="listCar d-flex mt-8" v-if="threeTabsTab==0"
                         v-for="(item,i) in realTimePoliceInformationList" :key="i"
                         :class="{'active':item.id == realTimePoliceInformationDetail.id}"
                         @click="checkRealTimePoliceInformationDetail(item)">
                        <AccidentMainImg :type="item.alarmType"></AccidentMainImg>

                        <div class="w-100">
                            <div class="w-100 flexCenterBetween mt-8 px-10">
                                <div class="text-bde2fa">{{item.incidentLocation}}({{item.direction}})</div>
                                <div class="text-bde2fa">{{item.alarmSource}}</div>
                                <div class="text-57b0ea">{{item.alarmTime}}</div>
                            </div>
                            <div class="w-100 flexCenterBetween mt-6 px-10">
                                <div v-if="item.type ==0" class="text-57b0ea">已持续{{item.continued}}分钟</div>
                                <div v-else class="d-flex">
                                    <SignDict class="mr-8" :value="item.accidentCarNum" returnType="all"
                                              type="car"></SignDict>
                                    <div class="d-inline-block line-height-1 px-2 pt-2"
                                         style="border:1px solid #8B5735;background-color: rgba(139,87,53,0.5)">
                                        {{item.isCasualty}}
                                    </div>

                                </div>

                                <div class="text-57b0ea">{{item.newProgress}}</div>
                            </div>

                        </div>
                    </div>


                    <div class="listCar flexCenter mt-8" v-if="threeTabsTab==1" v-for="(item,i) in riskWarningList"
                         :key="i"
                         :class="{'active':item.id == riskWarningDetail.id}" @click="checkRiskWarningDetail(item)">

                        <img src="../../assets/img/emergencyDuty/riskWarning/iconDanger.png" class="flex-no-zoom ml-10"
                             style="height:33px;width:33px" alt="">

                        <div class="w-100">
                            <div class="w-100 flexCenterBetween mt-8 px-10">
                                <div class="text-bde2fa">{{item.warningLoaction}}</div>
                                <div class="text-57b0ea">{{item.warningTime}}</div>
                            </div>
                            <div class="w-100 flexCenterBetween mt-6 px-10">
                                <div class="text-57b0ea">已持续{{item.duartion}}分钟</div>
                            </div>

                        </div>
                    </div>

                    <div class="listCar flexCenter mt-8" v-if="threeTabsTab==2" v-for="(item,i) in trafficControlList"
                         :key="i"
                         :class="{'active':item.id == trafficControDetail.id}" @click="checkTrafficControlDetail(item)">
                        <img src="../../assets/img/emergencyDuty/trafficControl/iconTrafficControl.png"
                             class="flex-no-zoom ml-10" style="height:33px;width:33px" alt="">

                        <div class="w-100">
                            <div class="w-100 flexCenterBetween mt-8 px-10">
                                <div class="text-bde2fa">{{item.name}}</div>
                                <div class="flexCenter">
                                    <SignDict class="mr-8" :value="item.controlType" type="trafficControl"></SignDict>
                                    <div class="text-57b0ea">{{item.beginTime}}</div>
                                </div>
                            </div>
                            <div class="w-100 flexCenterBetween mt-6 px-10">
                                <div class="text-57b0ea">已持续{{item.timeLong}}分钟</div>
                            </div>

                        </div>
                    </div>

                </div>

                <div class="d-flex justify-content-center mt-14">
                    <a-pagination size="small" :total="pageInfo[threeTabsTab].total"
                                  v-model="pageInfo[threeTabsTab].current" @change="onPageChange"/>
                </div>


            </div>

        </div>

<!--        <Jmodal2 :visible="realTimeDetailModalVisible"-->
<!--                 :title="realTimePoliceInformationDetail.incidentLocation"-->
<!--                 left="500" width="500" @cancel="realTimeDetailModalVisible = false">-->
<!--            <div>-->
<!--                <div><span class="opacity08 detailLabel">警情来源：</span><span>{{realTimePoliceInformationDetail.alarmSource}}</span>-->
<!--                </div>-->
<!--                <div><span-->
<!--                        class="opacity08 detailLabel">报警时间：</span><span>{{realTimePoliceInformationDetail.alarmTime}}</span>-->
<!--                </div>-->
<!--                <div><span class="opacity08 detailLabel">报警人：</span><span>{{realTimePoliceInformationDetail.alarmPersonName}}</span>-->
<!--                </div>-->
<!--                <div><span class="opacity08 detailLabel">事发位置：</span><span>{{realTimePoliceInformationDetail.incidentLocation}}</span>-->
<!--                </div>-->
<!--                <div><span class="opacity08 detailLabel">所属辖区：</span><span>{{realTimePoliceInformationDetail.jurisdiction}}</span>-->
<!--                </div>-->
<!--                <div><span-->
<!--                        class="opacity08 detailLabel">警情描述：</span><span>{{realTimePoliceInformationDetail.alarmDesc}}</span>-->
<!--                </div>-->
<!--                <div><span class="opacity08 detailLabel">最新进展：</span><span>{{realTimePoliceInformationDetail.newProgress}}</span>-->
<!--                </div>-->

<!--                &lt;!&ndash;<div class="mt-10 pt-10 text-right">&ndash;&gt;-->
<!--                &lt;!&ndash;<a-button type="primary" size="small" class="mr-14">&ndash;&gt;-->
<!--                &lt;!&ndash;处置记录&ndash;&gt;-->
<!--                &lt;!&ndash;</a-button>&ndash;&gt;-->
<!--                &lt;!&ndash;</div>&ndash;&gt;-->
<!--            </div>-->
<!--        </Jmodal2>-->

        <Jmodal2 :visible="realTimeDetailVideiModalVisible"
                 title="视频查看"
                 left="500" top="360" width="340" @cancel="realTimeDetailVideiModalVisible = false">
            <div>
                <video width="320" height="240" controls>
                    <source :src="realTimePoliceInformationDetail.alarmVideo" type="video/mp4">
                </video>
            </div>
        </Jmodal2>

        <Jmodal2 :visible="trafficControModalVisible" :title="trafficControDetail.road" left="500" width="660"
                 @cancel="trafficControModalVisible = false">
            <div>
                <div class="d-flex">
                    <Jselect :list="expresswayList" @jchange="expresswayModalChange" style="width:200px "
                             class="mr-14"></Jselect>
                    <div class="flexCenter text-white">
                        <a-checkbox> 沈阳方向</a-checkbox>
                        <a-checkbox> 海口方向</a-checkbox>
                    </div>
                </div>

                <div class="d-flex px-10 mt-10" style="background-color: rgba(32,86,255,0.2)">
                    <div class="">

                        <div class="my-8">
                            <a-checkbox>泊里收费站</a-checkbox>
                        </div>
                        <div class="my-8">
                            <a-checkbox>大场收费站</a-checkbox>
                        </div>
                        <div class="my-8">
                            <a-checkbox>大场收费站</a-checkbox>
                        </div>
                        <div class="my-8">
                            <a-checkbox>大场收费站</a-checkbox>
                        </div>
                        <div class="my-8">
                            <a-checkbox>大场收费站</a-checkbox>
                        </div>
                    </div>

                    <div class="gradientLine2px mx-10" style="height: 220px;"></div>
                    <div>
                        <div class="flexCenter my-8">
                            <div>管制类型：</div>
                            <a-radio-group v-model="trafficControDetail.ctlType" :options="ctrlTypes"/>
                        </div>

                        <div class="flexCenter my-14">
                            <div>开始时间：</div>
                            <a-date-picker v-model="trafficControDetail.startTime" show-time size="small"/>
                        </div>

                        <div class="flexCenter my-14">
                            <div>限行类型：</div>
                            <Jselect :list="expresswayList" @jchange="expresswayModalChange" style="width:200px "
                                     class="mr-14"></Jselect>
                        </div>
                        <div class="d-flex my-14">
                            <div class="flex-no-zoom">管制原因：</div>
                            <a-textarea
                                    placeholder=""
                                    :auto-size="{ minRows: 2, maxRows: 6 }"
                            />
                        </div>


                        <div class="my-14 text-right">
                            <a-button type="primary" size="small" @click="ignoreTrafficControl()">
                                解除
                            </a-button>
                        </div>

                    </div>


                </div>

            </div>
        </Jmodal2>

    </div>
</template>


<script>
    import {
        getRealTimePoliceInformationList, getRiskWarningList,
        getexpresswayList,
        getTrafficControlList, getRealTimePoliceInformationDetail, getTrafficControDetail, getFaceWarningScatter
    } from "../../common/api";
    import {echartsLineOptionFactory} from "../../common/echart-config/echart-config";
    import Jselect from "@/components/Jselect.vue";
    import AccidentMainImg from "@/components/accident-main-img.vue";
    import SignDict from "@/components/sign-dict.vue";
    import Jmodal2 from "@/components/jmodal2.vue";
    import PoliceInforDetail from "@/components/mapInfoDetail/policeInforDetail.vue";
    import * as moment from "moment";
    import {getDictsByType} from "../../utils/sys-dic-utils";
    import {clearIntervalArray, getLastCurrentTime} from "../../utils/js-utils";
    import Vue from 'vue'


    export default {
        name: "threeDataTabs",
        components: {Jselect, AccidentMainImg, SignDict, Jmodal2,PoliceInforDetail},
        data() {
            return {
                threeTabsTab: 0,
                //3个列表
                realTimePoliceInformationList: [],
                riskWarningList: [],
                trafficControlList: [],


                expresswayList: [],//大队列表
                upDownList: [{label: '上行', value: 0}, {label: '下行', value: 1}],//大队列表

                realTimeDetailModalVisible: false,
                realTimeDetailVideiModalVisible: false,
                trafficControModalVisible: false,

                realTimePoliceInformationDetail: {}, //实时警情
                riskWarningDetail: {}, //风险预警
                trafficControDetail: {},  //交通管制详情

                expresswaySelect: ["", ""],
                pageInfo: [{current: 1, total: 0}, {current: 1, total: 0}, {current: 1, total: 0},],


                // trafficControDetail: {},
                ctrlTypes: getDictsByType('trafficControlType'),

                intervalArray: [],
            }
        },
        methods: {
            switchThreeTabsTab(tabFlag) {
                this.threeTabsTab = tabFlag;

                this.realTimePoliceInformationDetail = {};
                this.riskWarningDetail = {};
                this.trafficControDetail = {};

            },
            //详情
            checkRealTimePoliceInformationDetail(item) {  //实时警情
                // this.realTimePoliceInformationDetail = item;
                //
                // this.realTimeDetailModalVisible = true;
                var myAppendTo = Vue.extend(PoliceInforDetail)
                var mo = new myAppendTo()
                mo.data = item
                mo.$mount()
                document.getElementById('mapInforDetailBox').appendChild(mo.$el)

            },
            checkRiskWarningDetail(item) { //风险预警
                this.riskWarningDetail = item;

                // getRiskWarningDetail(item.id).then(res => {
                //
                // });
                this.$emit('checkRiskWarning', item);

                this.$forceUpdate()
            },
            checkTrafficControlDetail(item) {
                this.trafficControDetail = item;
                this.trafficControModalVisible = true;

                // @todo
                // getTrafficControDetail(item.id).then(res => {
                //     if (res.isSuccess) {
                //         this.trafficControDetail = res.data;
                //         this.trafficControDetail.id = item.id;
                //         this.trafficControModalVisible = true;
                //         this.$forceUpdate()
                //
                //     }
                // });
                this.$forceUpdate()
            },

            // 三个列表 ----------------
            getRealTimePoliceInformationList() { //实时警情
                var reqBody = {
                    currentTime: getLastCurrentTime(),
                    motorWaId: this.expresswaySelect[0],  // 可能没有值
                    drivingdirection: this.expresswaySelect[1],
                    pageNumber: this.pageInfo[0].current,
                };
                getRealTimePoliceInformationList(reqBody).then(res => {
                    if (res.isSuccess) {
                        this.realTimePoliceInformationList = res.data.list;
                        this.pageInfo[0].total = res.data.total
                    }
                })
            },
            getRiskWarningList() {
                var reqBody = {
                    currentTime: getLastCurrentTime(),
                    motorWaId: this.expresswaySelect[0],
                    drivingdirection: this.expresswaySelect[1],
                    pageNumber: this.pageInfo[1].current,
                };
                getRiskWarningList(reqBody).then(res => {
                    if (res.isSuccess) {
                        this.riskWarningList = res.data.list;
                        this.pageInfo[1].total = res.data.total
                    }
                })
            },
            getTrafficControlList() {  //交通管制
                var reqBody = {
                    currentTime: getLastCurrentTime(),
                    motorWaId: this.expresswaySelect[0],
                    drivingdirection: this.expresswaySelect[1],
                    pageNumber: this.pageInfo[2].current,
                };
                getTrafficControlList(reqBody).then(res => {
                    if (res.isSuccess) {
                        this.trafficControlList = res.data.list;
                        this.pageInfo[2].total = res.data.total
                    }
                })
            },
            ignoreTrafficControl() {  //解除交通管制
                this.$message.loading({content: '数据提交中...', key: 'loading1', duration: 0});
                this.ignoreTrafficControl(this.trafficControDetail.id).then((res) => {
                    if (res.isSuccess) {
                        this.$message.success({content: '解除交通管制成功!', key: 'loading1', duration: 0});
                    } else {
                        this.$message.error({content: '解除交通管制失败!', key: 'loading1', duration: 0});
                    }

                })

            },
            getexpresswayList() {
                getexpresswayList().then(res => {
                    if (res.isSuccess) {
                        this.expresswaySelect[0] = res.data[0];
                        this.expresswayList = res.data;
                        this.expresswayList.forEach((v) => {
                            v.value = v.id;
                            v.label = v.name;
                        });
                    }
                })
            },
            expresswayChange(v) {
                console.log(v);
                this.expresswaySelect[0] = v;

                this.getRealTimePoliceInformationList();
                this.getRiskWarningList();
                this.getTrafficControlList();

            },
            upDownChange(v) {
                console.log(v);
                this.expresswaySelect[1] = v;

                this.getRealTimePoliceInformationList();
                this.getRiskWarningList();
                this.getTrafficControlList();
            },
            onPageChange(page) {
                this.getData();

            },
            getData() {
                if (this.threeTabsTab == 0) {
                    this.getRealTimePoliceInformationList();
                } else if (this.threeTabsTab == 1) {
                    this.getRiskWarningList();
                } else if (this.threeTabsTab == 3) {
                    this.getTrafficControlList();
                }
            },


            expresswayModalChange() {

            }
        },
        mounted() {

            this.getexpresswayList()


            this.getRealTimePoliceInformationList();
            this.getRiskWarningList();
            this.getTrafficControlList();

            this.intervalArray.push(setInterval(this.getRealTimePoliceInformationList, 1000 * 60 * 15));
            this.intervalArray.push(setInterval(this.getRiskWarningList, 1000 * 60 * 15));
            this.intervalArray.push(setInterval(this.getTrafficControlList, 1000 * 60 * 15));


        }, beforeDestroy() {
            clearIntervalArray(this.intervalArray)
        }
    }
</script>

<style scoped>
    .threeTabsBox {
        background-image: url("../../assets/img/emergencyDuty/bgTab.png");
        height: 772px;
        position: relative;
        padding: 17px 26px 20px 20px;
        margin-top: -20px;
    }

    .threeTabsTab {
        /*padding: 4px 30px;*/
        cursor: pointer;
        /*line-height: 1;*/
        color: #4290c7;
        width: 169px;
        height: 71px;
        padding-top: 7px;
        text-align: center;
        position: relative;
    }

    .threeTabsTab.active {
        background-size: 100% auto;
        background-image: url("../../assets/img/emergencyDuty/bgTabSeleced.png");
        background-repeat: no-repeat;
        /*font-weight: bold;*/
        color: white;
    }

    .listCar {
        border: 1px solid #1465AE;
        box-shadow: 0px 0px 6px rgba(33, 136, 199, 0.4) inset, 0px 0px 6px rgba(33, 136, 199, 0.4);
        cursor: pointer;
    }

    .listCar.active {
        border: 1px solid #0BBAD1;
        box-shadow: 0px 0px 10px rgba(39, 148, 209, 0.7) inset, 0px 0px 10px rgba(39, 148, 209, 0.7);
        background-color: rgba(39, 148, 209, 0.2);
    }

    ::-webkit-scrollbar {
        display: none; /* Chrome Safari */
    }

    .detailLabel {
        display: inline-block;
        width: 70px;
        text-align: right;
    }

    >>> .ant-pagination-prev a, >>> .ant-pagination-next a {
        color: #1890ff;
    }

    >>> .ant-pagination-disabled a, >>> .ant-pagination-disabled:hover a, .ant-pagination-disabled:focus a, .ant-pagination-disabled .ant-pagination-item-link, .ant-pagination-disabled:hover .ant-pagination-item-link, .ant-pagination-disabled:focus .ant-pagination-item-link {
        color: white;
    }

    >>> .ant-pagination-item {
        border-radius: 100px;
    }

    >>> .ant-pagination-item a {
        color: white;
    }

    >>> .ant-pagination-item-active {
        background: #1890ff;
    }

    /*checkbox*/
    >>> .ant-checkbox-wrapper, >>> .ant-radio-wrapper {
        color: #BCE2FC;
    }

    >>> .ant-checkbox-inner, >>> .ant-radio-inner {
        background-color: transparent;
        border: 1px solid #35B1F5;
    }

    >>> .ant-checkbox-checked .ant-checkbox-inner {
        background-color: #0D72AC;
    }

    >>> .ant-radio-checked .ant-radio-inner {
        border: 1px solid #35B1F5;
    }

    >>> .ant-radio-inner::after {
        background-color: #35B1F5;
    }

    >>> .ant-input {
        background-color: transparent;
        border: 1px solid #5BB0EF;
        color: #BCE2FC;
    }

    >>> .ant-calendar-picker-icon {
        color: #e5f4fe;
    }

</style>
